<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">

          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('add')"
                       v-permission="1122">新增轮播图</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <!-- <el-table-column type="index"
                           width="80"
                           align="center" /> -->
          <el-table-column prop="picOrder"
                           label="排序"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="addr"
                           label="轮播图"
                           align="center"
                           width="240">
            <template #default="scope">

              <el-image style="width: 180px; height: 60px"
                        :src="scope.row.addr[0]?.url"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        v-if="scope.row.addr"
                        :preview-teleported="true"
                        :min-scale="0.2"
                        :preview-src-list="[scope.row.addr[0]?.url]"
                        :initial-index="1"
                        fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="title"
                           label="轮播图标题"
                           show-overflow-tooltip
                           align="left" />
          <el-table-column prop="jumpType"
                           label="跳转类型"
                           show-overflow-tooltip
                           align="center"
                           width="180">
            <template #default="scope">
              <span v-if="scope.row.jumpType == 0"> 暂无</span>
              <span v-if="scope.row.jumpType == 1"> 网页链接</span>
              <span v-if="scope.row.jumpType == 2"> 企业主页</span>
            </template>
          </el-table-column>
          <el-table-column prop="jumpType"
                           label="平台类型"
                           show-overflow-tooltip
                           align="center"
                           width="180">
            <template #default="scope">
              <span v-if="scope.row.type == 0"> 小程序首页轮播图</span>
              <span v-if="scope.row.type == 1"> 引导页轮播图</span>

            </template>
          </el-table-column>
          <el-table-column prop="jumpUrl"
                           label="跳转路径"
                           show-overflow-tooltip
                           align="center"
                           width="250" />

          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="100"
                           fixed="right">
            <template #default="scope">
              <div class="btnsDatil flex_c">
                <!-- 其它操作 -->
                <div @click="methods.handleAction('edit', scope.row)"
                     v-permission="1123">编辑</div>
                <div @click="methods.handleAction('delete', scope.row)"
                     v-permission="1124"
                     class="ml14">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>

      <el-dialog v-model="state.dialogVisible"
                 center
                 v-if="state.dialogVisible"
                 :title="state.dialogTitle"
                 :width="$px2rem('680px')"
                 top="24vh">
        <div class="inputs ">
          <el-form ref="ruleFormRef"
                   :model="state.ruleForm"
                   status-icon
                   :rules="state.rules"
                   :label-width="$px2rem('80px')"
                   label-position="left"
                   class="demo-ruleForm">
            <el-form-item label="标题"
                          prop="title">
              <el-input v-model="state.ruleForm.title"
                        @input="state.ruleForm.title = $input.inputLimit('D10006', state.ruleForm.title)"
                        placeholder="请填写轮播图标题"
                        clearable />
            </el-form-item>
            <el-form-item label="跳转类型"
                          prop="jumpType">
              <el-radio-group v-model="state.ruleForm.jumpType"
                              class="ml-4">
                <el-radio :label="0">暂无</el-radio>
                <el-radio :label="1">网页链接</el-radio>
                <el-radio :label="2">企业主页</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="平台类型"
                          prop="type">
              <el-radio-group v-model="state.ruleForm.type"
                              class="ml-4">
                <el-radio :label="0">小程序首页轮播图</el-radio>
                <el-radio :label="1">引导页轮播图</el-radio>

              </el-radio-group>
            </el-form-item>
            <el-form-item label="跳转路径"
                          :prop="state.ruleForm.jumpType == 0 ? '' : 'jumpUrl'">
              <el-input v-model="state.ruleForm.jumpUrl"
                        placeholder="请填写跳转路径"
                        clearable />
            </el-form-item>
            <div>

              <el-form-item label="图片"
                            prop="addr"
                            class="logosm">
                <uploadImg :showNum="1"
                           class="uploadImg"
                           :uploadImgList="state.ruleForm.addr"
                           @changeUploadImgList="methods.UploadLogo" />
              </el-form-item>
            </div>
            <el-form-item label="排序"
                          prop="picOrder">
              <el-input v-model="state.ruleForm.picOrder"
                        @input="state.ruleForm.picOrder = $input.inputLimit('D10005', state.ruleForm.picOrder)"
                        placeholder="排序"
                        clearable />
            </el-form-item>
            <div class="tar">
              <el-button v-preventReClick
                         @click="state.dialogVisible =false">取 消</el-button>
              <el-button v-preventReClick
                         type="primary"
                         @click="methods.subAdd">提 交</el-button>
            </div>
          </el-form>

        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    ruleForm: {
      title: '',
      jumpType: '',
      type: '',
      jumpUrl: '',
      addr: [],
      picOrder: '',
    },
    rules: {
      title: [
        { required: true, message: "请填写轮播图标题", trigger: "blur" },
      ],
      jumpType: [
        { required: true, message: "请选择跳转类型", trigger: "change" },
      ],
      type: [
        { required: true, message: "请选择平台类型", trigger: "change" },
      ],
      jumpUrl: [
        { required: true, message: "请填写跳转路径", trigger: "blur" },
      ],
      addr: [
        { required: true, message: "请长传图片", trigger: "blur" },
      ],
      picOrder: [
        { required: true, message: "请输入排序", trigger: "blur" },
      ],
    },
    loading: false,
    dialogVisible: false,
    dialogTitle: '新增轮播图',
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      descs: ["id"],
      pageSize: 10,
    },
    totalInputColumns: [

    ],
    type: '新增',
    optionsPre: [],
    scaleData: [],
    optionsSec: [],
    drawerData: {},
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
});
const methods = {
  // 企业glogo
  UploadLogo (data) {
    state.ruleForm.addr = data;
  },

  subAdd () {
    let url = '/pictureAddr/add'
    if (state.type == '编辑') {
      url = '/pictureAddr/update'
    }
    app.$refs.ruleFormRef.validate((valid) => {
      if (valid) {
        const loading = ElLoading.service({
          text: "努力加载中",
        });
        let data = JSON.parse(JSON.stringify(state.ruleForm))
        data.addr = state.ruleForm.addr[0].url
        app.$post(url, data).then(res => {
          if (res.code == 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            methods.getDataList()
            state.dialogVisible = false
          } else {
            ElMessage({ type: 'success', message: res.message })
          }
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        return
      }
    })
  },
  handleAction (type, data) {
    switch (type) {
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "add": // 新增
        state.ruleForm = initState().ruleForm
        state.type = '新增'
        state.dialogTitle = '新增轮播图'
        state.dialogVisible = true
        break;
      case "edit": // 编辑
        state.type = '编辑'
        state.dialogTitle = '编辑轮播图'
        state.ruleForm = JSON.parse(JSON.stringify(data))
        state.dialogVisible = true
        break;
      case "examine": // 审核
        data.cityArr = data.province + "/" + data.city + "/" + data.district;
        data.licenseImg = JSON.parse(data.license).map((url) => url.url);
        state.drawerData = data;
        state.dialogVisible = true;
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该轮播图?", "删除轮播图", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/pictureAddr/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
        break;
    }
  },

  getDataList () {

    state.loading = true
    app.$http.post("/pictureAddr/pageList", state.params)
      .then((res) => {
        res.data.list.forEach(res => {
          res.addr = [{
            "url": res.addr,
            "fileType": 'image'
          }]
        })
        state.tableData = res.data.list;
        state.totalSize = res.data.total;
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
  },
  //分页变化
  handleSizeChange (i) {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange (i) {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.logosm {
  ::v-deep(.el-form-item__label::after) {
    content: '比例为1.8:1 ,大小不超过5m';
    color: #969696;
    position: absolute;
    font-size: 12px;
    top: 260px;
    left: 300px;
  }
}
// .unloadImg {
//   ::v-deep(.el-image) {
//     width: 180px !important;
//   }
//   ::v-deep(.el-upload) {
//     width: 180px !important;
//   }
// }
::v-deep(.el-dialog__body) {
  padding: 20px 30px !important;
}
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }

  .imgs {
    flex-wrap: wrap;
    .forbox {
      // width: 150px;
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }

  ::v-deep(.el-drawer__title) {
    color: rgba(0, 121, 254, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .drawerConcent {
    .title {
      color: rgb(16, 16, 16);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .flex_sb {
      align-items: center;
      flex-wrap: wrap;
      .inputShow {
        margin-top: 16px;
        width: 48%;
        min-width: 260px;
      }
    }
  }
}
</style>
